// http://v4-alpha.getbootstrap.com/getting-started/flexbox/#how-it-works
// $enable-flex: true;

$nav-pills-border-radius: 0;
$nav-pills-active-link-color: white;
$nav-pills-active-link-bg: #366e98;
$brand-primary: #366e98;
$brand-secondary: #047f75;
$brand-success: #089944;
$brand-danger: #990822;
$brand-warning: #eca649;
$brand-info: #044b7f;

@import '../../../node_modules/bootstrap/scss/bootstrap';

// imported from https://github.com/twbs/bootstrap/blob/d64466a2488bbaac9a1005db3a199a8bc6846e3e/scss/_variables.scss#L420
.text-monospace {
  font-family: SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
}

// -------------------------------------------------------------------

$fa-font-path: '.';

@import '../../../node_modules/font-awesome/scss/font-awesome';

// Replace Bootstrap's glyphicons by Font Awesome.
.glyphicon {
  @extend .fa;
}

// -------------------------------------------------------------------

@import '../../../node_modules/font-mfizz/dist/font-mfizz';

// -------------------------------------------------------------------

@import './chartist';
@import './meter';
@import './icons';
@import './usage';

// ROOT STYLES =================================================================

$side-menu-bg: #044b7f;
$side-menu-color: white;

@include media-breakpoint-down(md) {
  html {
    font-size: 1.5vw;
  }
}

@include media-breakpoint-down(sm) {
  html {
    font-size: 3vmin;
  }
}

@include media-breakpoint-down(xs) {
  html {
    font-size: 2.95vmin;
  }
}

// REACT-VIRTUALIZED ===========================================================

@import '../../../node_modules/react-virtualized/styles';

// REACT-SELECT ================================================================

$select-input-height: 40px; // Bootstrap input height
@import '../../../node_modules/react-select/scss/default';

// Bootstrap hack...
.is-searchable {
  width: 100%;
}

.Select-value-label {
  color: #373a3c;
}

.Select-control {
  border-radius: unset;
}

// Disabled option style.
.Select-menu-outer .Select-option.is-disabled {
  cursor: default;
  font-weight: bold;
  color: #777;
}

.Select-placeholder {
  color: #999;
}

.Select--single > .Select-control .Select-value {
  color: #333;
}

.d-inline-flex {
  display: inline-flex;
}

.d-flex {
  display: flex;
}

.align-self-center {
  align-self: center;
}

.justify-content-end {
  justify-content: flex-end;
}

// COLORS ======================================================================

.xo-status-running {
  @extend .text-success;
}

.xo-status-halted {
  @extend .text-danger;
}

.xo-status-suspended {
  @extend .text-info;
}

.xo-status-unknown,
.xo-status-paused,
.xo-status-disabled {
  @extend .text-muted;
}

.xo-status-busy {
  @extend .text-warning;
}

// HEADER CONTENT STYLE=========================================================

.header-title {
  margin-bottom: 1em;
}

.nav-tabs {
  font-size: 1.2em;
}

// CONTENT TAB STYLE ===========================================================

.btn-huge {
  font-size: 4em;
}

.console {
  margin-top: 1em;
  text-align: center;
}

// GENERAL STYLES ==============================================================

.tag-ip {
  margin-left: 1em;
}

// MENU STYLE ==================================================================

.xo-menu,
.xo-sub-menu {
  background: $side-menu-bg;
  color: $side-menu-color;
}

.xo-menu {
  a {
    color: inherit;
  }

  button {
    background-color: inherit;
    color: inherit;
  }
}

.xo-menu-item {
  min-width: 100%;
  position: relative;
  width: max-content;

  &:hover {
    background-color: $nav-pills-active-link-bg;
    color: $nav-pills-active-link-color;
  }
}

.xo-sub-menu {
  left: 100%;
  opacity: 0;
  position: absolute;
  top: 0;
  transition: opacity 0.3s;
  visibility: hidden;
  width: max-content;
  z-index: 1000;
}

.xo-menu-item:hover > .xo-sub-menu {
  opacity: 1;
  visibility: visible;
}
// PAGE HEADER STYLE ===========================================================

.page-header {
  background: $gray-lighter;
}

// NOTIFICATIONS STYLE =========================================================

.notify-container {
  align-content: flex-start;
  align-items: flex-start;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  justify-content: flex-end;
  position: absolute;
  right: 10px;
  top: 10px;
}

.notify-item {
  border-radius: 5px;
  border: 1px solid black;
  margin: 5px 10px;
  width: 250px;
  // Workaround to prevent some bootstrap elements from hiding the notifications.
  // In bootstrap, ".input-group .form-control" and ".input-group > .input-group-btn > .btn"
  // have "z-index: 2" and "z-index: 3" if they are hovered, focused or active.
  // (https://github.com/twbs/bootstrap/blob/v4.0.0-alpha.5/scss/_input-group.scss#L18-L37)
  // (https://github.com/twbs/bootstrap/blob/v4.0.0-alpha.5/scss/_input-group.scss#L177-L187)
  z-index: 3;
  &.success {
    background: $alert-success-bg;
    border-color: $alert-success-border;
    color: $alert-success-text;
  }
  &.info {
    background: $alert-info-bg;
    border-color: $alert-info-border;
    color: $alert-info-text;
  }
  &.error {
    background: $alert-danger-bg;
    border-color: $alert-danger-border;
    color: $alert-danger-text;
  }
}

.notify-item > p {
  margin: 10px;
}

.notify-title {
  font-weight: 700;
}

// =============================================================================

.no-text-selection {
  cursor: not-allowed;
  -moz-user-select: none; /* Firefox */
  user-select: none; /* Chrome */
}

.message-expandable {
  cursor: pointer;

  span {
    text-decoration: underline;
  }
}

.task-info,
.task-warning {
  padding: 2px 10px;
  margin: 10px 0;
  list-style-type: none;
  border-radius: 10px;
  border: 1px dashed #eca649;

  li {
    margin-bottom: 10px;

    &:last-child {
      margin-bottom: 0;
    }

    strong {
      display: block;
      color: #eca649;
    }

    span {
      color: grey;
    }
  }
}
